<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .box:hover{
            /* 当鼠标悬停到box上需要生效的样式，样式可以有很多条，没有限制，
            如果添加的样式悬停（hover)前已经添加过那就会直接覆盖原有样式
            鼠标悬停只是新增和覆盖，不是替换前元素所有样式。
            */
            font-size: 40px;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 伪类选择器 -->
        <!-- 
            作用：用于选中元素鼠标悬停后的状态
            书写方式： 选择器:hover{
                代码块
                //解释：当鼠标选择到选择器选中元素上方时，生效代码块内部的代码。
            
            进阶用法：选择器1：hover 选择器2{
                代码块
                //解释：当鼠标悬停到选择器1的时候，让选择器1下方的选择器2生效代码块的内容
            }
            }
        -->
        <span>与你在一起的日常</span>
        <div class="son"><span>都是奇迹</span></div>
    </div>
</body>
</html>